<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <div id="app">
      <table border="1px" cellpadding="0" cellspacing="0">
        <tr>
          <td width="50px">学号</td>
          <td width="100px">姓名</td>
          <td width="200px">新增时间</td>
          <td width="100px">操作</td>
        </tr>
        <tr v-for="(item,i) in list" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.time}}</td>
          <td>
            <button @click="del(i)">删除</button>
          </td>
        </tr>
        <tr>
          <td><input type="text" v-model="newId" placeholder="请输入学号" /></td>
          <td><input type="text" v-model="newName" placeholder="请输入姓名" /></td>
          <td><input type="text" placeholder="搜索学生姓名" /></td>
          <td>
            <button @click="search">搜索</button>
          </td>
          <td><input type="button" @click="add" value="新增" /></td>
        </tr>
      </table>
    </div>
  </head>
  <body>
  </body>
  <script src="vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {


        list: [{
          id: 1,
          name: '小王',
          time: '19点05分'
        }, {
          id: 2,
          name: '小红',
          time: '19点05分'
        }, {
          id: 3,
          name: '小刚',
          time: '19点05分'
        }],
        newId: null,
        newName: null,



      },
      methods: {



        add() {
          var obj = {
            id: this.newId,
            name: this.newName,
            time: new Date()
          }
          this.list.push(obj);
        },
        del(e) {
          let newArr=this.list.filter(item => {
            if (item.id != e.id) {
              return item
            }
          })
          this.list = newArr;
        },
        search() {
          let newArr = this.list.filter(item => {
            if (item.id == e.id) {
              return item
            }
          })
          this.list = newArr;
        }



      }



    })
  </script>
</html>
